$c-default       ?=        #363f54
$c-light       ?=        #d9d9d9
$c-red       ?=        #ec6876
$c-succ       ?=        #20bd3d
$c-blue       ?=        #34aff6

html,body
    height 100%
    min-height:100%
    width 100%
    background-color:#fff
    font-family "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
    word-break break-all
html 
    font-size: 62.5%;
body 
    font-size: 1.4rem;
/* common css */
/* 宽度单位 */
for i in range(5, 100, 5)
	.w{i}
		width: (i)%

/* 字体大小 */
for i in range(12, 42, 2)
	.fs{i}
		font-size: (i/10)rem !important

for i in range(10, 50, 5)
	.mt{i}
		margin-top: (i)px !important
for i in range(10, 70, 5){
    .lh{i}{
        line-height: (i)px !important
    }
}
.fw 
	font-weight: bold;

.fwn 
	font-weight: normal;

/* 浮动 */
.fl 
	float: left;

.fr 
	float: right;
.cl
	clearfix()

/* 颜色值 */
.c0 
	color: #000;
.c1 
	color: #fff;
.c-red
	color $c-red
.c-succ{
    color $c-succ
}
.c-blue{
    color $c-blue
}
.c9{
    color #999   
}
.c6{
    color #666   
}
.c-tel
    color #00479a
/* 字体排版 */
.tc
	text-align: center;
.tl 
	text-align: left;
.tr 
	text-align: right;
.te
	te()
.text-hidden
	text-indent:-99em
/* 百分比布局 */
.ti4{
    text-indent 4em
}
.flex
	 flex()
.flex
	&>div,
	&>p,
	&>li 
		-webkit-box-flex: 1.0;
		box-flex: 1.0;
[class*='col-'] {
    float: left;
    /* column-space */
}

.grid {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.grid:after {
    content: "";
    display: table;
    clear: both;
}

.push-right {
    float: right;
}


/* Content Columns */

.col-1-1 {
    width: 100%;
}

.col-2-3,
.col-8-12 {
    width: 66.66%;
}

.col-1-2,
.col-6-12 {
    width: 50%;
}

.col-1-3,
.col-4-12 {
    width: 33.33%;
}

.col-1-4,
.col-3-12 {
    width: 25%;
}

.col-1-5 {
    width: 20%;
}

.col-1-6,
.col-2-12 {
    width: 16.667%;
}

.col-1-7 {
    width: 14.28%;
}

.col-1-8 {
    width: 12.5%;
}

.col-1-9 {
    width: 11.1%;
}

.col-1-10 {
    width: 10%;
}

.col-1-11 {
    width: 9.09%;
}

.col-1-12 {
    width: 8.33%
}


/* Layout Columns */

.col-11-12 {
    width: 91.66%
}

.col-10-12 {
    width: 83.333%;
}

.col-3-4,
.col-9-12 {
    width: 75%;
}

.col-5-12 {
    width: 41.66%;
}

.col-7-12 {
    width: 58.33%
}


/* Pushing blocks */

.push-2-3,
.push-8-12 {
    margin-left: 66.66%;
}

.push-1-2,
.push-6-12 {
    margin-left: 50%;
}

.push-1-3,
.push-4-12 {
    margin-left: 33.33%;
}

.push-1-4,
.push-3-12 {
    margin-left: 25%;
}

.push-1-5 {
    margin-left: 20%;
}

.push-1-6,
.push-2-12 {
    margin-left: 16.667%;
}

.push-1-7 {
    margin-left: 14.28%;
}

.push-1-8 {
    margin-left: 12.5%;
}

.push-1-9 {
    margin-left: 11.1%;
}

.push-1-10 {
    margin-left: 10%;
}

.push-1-11 {
    margin-left: 9.09%;
}

.push-1-12 {
    margin-left: 8.33%
}